<script setup>
import _ from 'lodash'
import propextBtn from "./ele/common-ele/propext-btn.vue";
import propextList from "./ele/common-ele/propext-list.vue";
import propextSlider from "./ele/common-ele/propext-slider.vue";
import propextTabs from "./ele/common-ele/propext-tabs.vue";
import propextCollapse from "./ele/common-ele/propext-collapse.vue";

import propextForm from "./ele/common-ele/propext-form.vue";
import propextFormDate from "./ele/common-ele/propext-form-date.vue";
import propextFormFile from "./ele/common-ele/propext-form-file.vue";
import propextFormRadio from "./ele/common-ele/propext-form-radio.vue";
import propextFormSlider from "./ele/common-ele/propext-form-slider.vue";
import propextFormSwitch from "./ele/common-ele/propext-form-switch.vue";
import propextPage from "./ele/common-ele/propext-page.vue";
import propextNav from "./ele/common-ele/propext-nav.vue";
import cChartProp from './ele/charts/prop.vue';
import propextBox from "./ele/common-ele/propext-box.vue"
import propextPagination from './ele/common-ele/propext-pagination.vue'
import propextCascader from './ele/common-ele/propext-cascader.vue'

import TPL_CATES from "../utils/tpl-cate";
import {computed, onMounted, ref, watch} from "vue";
import {useDesignStore} from "../store/design.js";
import {api} from "@jzl/api";

defineOptions({
  name: "BuilderNodePropext"
})

const props = defineProps({
  eleDef: Object,
  item: Object,
})

const dyncCompInfo = ref(null)
const chartSetting = ref({})

const isFormComp = computed(() => {
  let nodeType = _.get(props.eleDef, '_type') || _.get(props.eleDef, '_node');
  return _.findIndex(TPL_CATES.formElems, ele => ele.component === nodeType) >= 0;
})

const isChartComp = computed(() => {
  let nodeType = /*_.get(props.eleDef, '_type') || */_.get(props.eleDef, '_node');
  let isChart = _.findIndex(TPL_CATES.chartElems, ele => ele.component === nodeType) >= 0;

  return isChart && _.indexOf(["c$chartTableComp", "c$chartCardComp"], nodeType) < 0;
})

const isDyncComp = computed(() => {
  let lib = props.eleDef?._lib;
  return !!lib;
})

const dyncCompPropSchema = computed(() => {
  return dyncCompInfo.value?.comp_def?.setting_schema
})

const dyncComps = computed(() => {
  return useDesignStore().dyncComps
})

const initDyncCompInfo = () => {
  if (isDyncComp.value) {
    loadDyncCompInfo();
  }
}

const loadDyncCompInfo = async () => {

  let compLib = props.eleDef?._lib;
  let compName = props.eleDef?._type || props.eleDef?._node;

  if (!compLib || !compName) return;

  let key = `${compLib}-${compName}`;
  let compInfo = dyncComps.value?.[key];

  if (!compInfo) {
    compInfo = await api.comp.getCompByName(compName, compLib);
    useDesignStore().setDyncComps(compInfo);
  }

  dyncCompInfo.value = compInfo;
}

onMounted(() => {
  initDyncCompInfo();

  chartSetting.value = $reportUtils.getChartMixSetting(props.eleDef?._ext)
})

watch(() => props.eleDef?._type, () => {
  initDyncCompInfo()
})
watch(() => props.eleDef?._code, () => {
  chartSetting.value = $reportUtils.getChartMixSetting(props.eleDef?._ext)
})

watch(
  () => chartSetting.value,
  (val) => {
    props.eleDef._ext = $reportUtils.clearChartDefaultSetting(val);
  },
  {deep: true}
)
</script>

<template>
  <div v-if="eleDef">
    <propext-btn
      v-if="eleDef._node === 'buttonComp'"
      :ext="eleDef._ext"
      v-bind="$attrs"
    />
    <propext-list
      v-else-if="eleDef._node === 'c$JzlListComp'"
      :ext="eleDef._ext"
      :item="item"
      v-bind="$attrs"
    />
    <propext-slider v-else-if="eleDef._node === 'sliderComp'" :ext="eleDef._ext"></propext-slider>
    <propext-tabs v-else-if="eleDef._node === 'tabsComp'" :ext="eleDef._ext"></propext-tabs>
    <propext-collapse v-else-if="eleDef._node === 'collapseComp'" :ext="eleDef._ext"></propext-collapse>
    <propext-page v-else-if="eleDef._node === 'c$jzlPageSubComp'" :ext="eleDef._ext"></propext-page>
    <propext-nav v-else-if="eleDef._node === 'c$navComp'" :ext="eleDef._ext"></propext-nav>
    <propext-box v-else-if="eleDef._node === 'c$boxComp'" :ext="eleDef._ext"></propext-box>
    <propextPagination v-else-if="eleDef._node === 'paginationComp'" :ext="eleDef._ext" />
    <propextCascader
      v-else-if="eleDef._node === 'c$cascaderComp' || eleDef._node === 'c$selectComp'"
      :ext="eleDef._ext"
      v-bind="$attrs"
    />
    <template v-else-if="isFormComp">
<!--      <propext-form :ext="eleDef._ext" :ele-def="eleDef" v-bind="$attrs"></propext-form>-->
      <!--<propext-form-phone></propext-form-phone>-->
      <propext-form-file
        v-if="eleDef._node === 'c$fileComp' || eleDef._node === 'c$imageComp'"
        :ext="eleDef._ext"
      />
      <propext-form-date v-else-if="eleDef._node === 'c$timeComp'" :ext="eleDef._ext"></propext-form-date>
      <propext-form-radio v-else-if="eleDef._node === 'c$radioComp'" :ext="eleDef._ext"></propext-form-radio>
      <propext-form-slider v-else-if="eleDef._node === 'c$sliderComp'" :ext="eleDef._ext"></propext-form-slider>
      <propext-form-switch v-else-if="eleDef._node === 'c$switchComp'" :ext="eleDef._ext"></propext-form-switch>
    </template>
    <c-chart-prop
      v-else-if="isChartComp"
      v-model="chartSetting"
      :ele-def="eleDef"
      :item="item"
    />
    <template v-else-if="isDyncComp"><!-- dync comp -->
      <vue-form
        v-if="eleDef && dyncCompInfo && dyncCompPropSchema"
        v-model="eleDef._ext"
        class="j-gene-form ele-prop-item"
        :ui-schema="{
          'ui:options': {
             showTitle: false,
             showDescription: false
          }
        }"
        :form-props="{ size: 'mini', labelSuffix: '' }"
        :schema="dyncCompPropSchema">
      </vue-form>
    </template>
  </div>
</template>
